<template>
    <el-button type="primary" plain @click="dialogFormVisible = true">
        新增
    </el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="Name" label="用户名" width="80" />
        <el-table-column prop="RoleName" label="角色" width="100" />
        <el-table-column prop="Sex" label="性别" width="80">
            <template v-slot="scope">
                <span v-if="scope.row.Sex == true">男</span>
                <span v-else>女</span>
            </template>
        </el-table-column>
        <el-table-column prop="ProvincesName" label="所在省份" width="110" />
        <el-table-column prop="CityName" label="所在市" width="110" />
        <el-table-column prop="XianName" label="所在县" width="110" />
        <el-table-column prop="Fulladdress" label="地址详情" width="108" show-overflow-tooltip>
            <template v-slot="scope">
                <span>{{ scope.row.Fulladdress }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="CreateName" label="创建人" width="110">
            <template v-slot="scope">
                <span v-if="!scope.row.CreateName">---</span>
                <span v-else>{{ scope.row.CreateName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="CreateDate" label="创建日期" width="180">
            <template v-slot="scope">
                <span>{{ moment(scope.row.CreateDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="UpdateName" label="修改人" width="110">
            <template v-slot="scope">
                <span v-if="!scope.row.UpdateName">---</span>
                <span v-else>{{ scope.row.UpdateName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="UpdateDate" label="修改日期" width="180">
            <template v-slot="scope">
                <span v-if="!scope.row.UpdateDate">---</span>
                <span v-else>{{ moment(scope.row.UpdateDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template v-slot="scope">
                <el-button @click="DelAccount(scope.row.Id)" type="primary" plain>删除</el-button>
                <el-button @click="UpdAccount(scope.row)" type="success" plain>编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="Total.PageIndex" v-model:page-size="Total.PageSize"
            :page-sizes="[15, 30, 45, 60]" :size="size" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="Total.TotalCount" />
    </div>

    <el-dialog v-model="dialogFormVisible" title="新增" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="用户名" prop="Name">
                <el-input v-model="ruleForm.Name" />
            </el-form-item>
            <el-form-item label="性别" prop="Sex">
                <el-radio-group v-model="ruleForm.Sex">
                    <el-radio :value="true">男</el-radio>
                    <el-radio :value="false">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所在地址">
                <el-select v-model="ruleForm.Provinces" placeholder="请选择省份" @change="ShowCity(ruleForm.Provinces)"
                    style="width: 130px;">
                    <el-option v-for="a in Provinces" :label="a.ProvincesName" :value="a.Id" />
                </el-select>
                <el-select v-model="ruleForm.City" placeholder="请选择市" @change="ShowXian(ruleForm.City)"
                    style="width: 130px;">
                    <el-option v-for="a in City" :label="a.CityName" :value="a.Id" />
                </el-select>
                <el-select v-model="ruleForm.Xian" placeholder="请选择县" style="width: 130px;">
                    <el-option v-for="a in Xian" :label="a.XianName" :value="a.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="ruleForm.Department" placeholder="请选择部门" clearable>
                    <el-option label="IT部门" :value="1" />
                    <el-option label="人力资源部" :value="2" />
                    <el-option label="财务部" :value="3" />
                    <el-option label="销售部" :value="4" />
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="addr">
                <el-input v-model="ruleForm.Fulladdress" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="UpddialogFormVisible" title="编辑" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="用户名" prop="Name">
                <el-input v-model="ruleForm.Name" />
            </el-form-item>
            <el-form-item label="性别" prop="Sex">
                <el-radio-group v-model="ruleForm.Sex">
                    <el-radio :value="true">男</el-radio>
                    <el-radio :value="false">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所在地址">
                <el-select v-model="ruleForm.Provinces" placeholder="请选择省份" @change="ShowCity(ruleForm.Provinces)"
                    style="width: 130px;">
                    <el-option v-for="a in Provinces" :label="a.ProvincesName" :value="a.Id" />
                </el-select>
                <el-select v-model="ruleForm.City" placeholder="请选择市" @change="ShowXian(ruleForm.City)"
                    style="width: 130px;">
                    <el-option v-for="a in City" :label="a.CityName" :value="a.Id" />
                </el-select>
                <el-select v-model="ruleForm.Xian" placeholder="请选择县" style="width: 130px;">
                    <el-option v-for="a in Xian" :label="a.XianName" :value="a.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="ruleForm.Department" placeholder="请选择部门" clearable>
                    <el-option label="IT部门" :value="1" />
                    <el-option label="人力资源部" :value="2" />
                    <el-option label="财务部" :value="3" />
                    <el-option label="销售部" :value="4" />
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="ruleForm.Fulladdress" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="UpdsubmitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="UpddialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
import http from '@/http/axiosHelper';
const store = useCounterStore()

const tableData = ref([])
const Total = ref({
    TotalCount: 1,
    TotalPage: 1,
    PageIndex: 1,
    PageSize: 15
})
const TJ = ref({
    Name: ""
})
onMounted(() => {
    ShowAccount()
    ShowProvinces()
    ShowCity(0)
    ShowXian(0)
})
const ShowAccount = () => {
    http.get("/api/Account/GetAccount", {
        params: {
            PageIndex: Total.value.PageIndex,
            PageSize: Total.value.PageSize,
            Name: TJ.value.Name
        }
    }).then(res => {
        tableData.value = res.data.PageDatas
        Total.value.TotalCount = res.data.TotalCount
        Total.value.TotalPage = res.data.TotalPage
    })
}
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
watch(Total, () => {
    ShowAccount()
}, { deep: true })
//新增
const dialogFormVisible = ref(false)
const ruleForm = reactive({
    "LoginName": store.Account.Name,
    "Id": 0,
    "Name": "",
    "PassWord": "12345678",
    "Sex": true,
    "Provinces": "",
    "City": "",
    "Xian": "",
    "Fulladdress": "",
    "CreateName": "",
    "CreateDate": "",
    "Department": ""
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    Name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.post("/api/Account/CreateAccount", ruleForm).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success(res.data.Message)
                    ShowAccount()
                    dialogFormVisible.value = false
                    ruleForm.Name = ""
                    ruleForm.Provinces = ""
                    ruleForm.City = ""
                    ruleForm.Xian = ""
                    ruleForm.Fulladdress = ""
                    ruleForm.Name = ""
                    ruleForm.Department = ""
                }
                else {
                    ElMessage.warning(res.data.Message)
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
//修改
const UpddialogFormVisible = ref(false)
const UpdAccount = (row: any) => {
    UpddialogFormVisible.value = true
    ruleForm.Id = row.Id
    ruleForm.Name = row.Name
    ruleForm.Sex = row.Sex
    ruleForm.Provinces = row.ProvincesName
    ruleForm.City = row.CityName
    ruleForm.Xian = row.XianName
    ruleForm.Fulladdress = row.Fulladdress
    ruleForm.Department = row.Department
}
const UpdsubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.post("/api/Account/UpdateAccount", ruleForm).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success(res.data.Message)
                    ShowAccount()
                    UpddialogFormVisible.value = false
                    ruleForm.Name = ""
                    ruleForm.Sex = true
                    ruleForm.Provinces = ""
                    ruleForm.City = ""
                    ruleForm.Xian = ""
                    ruleForm.Fulladdress = ""
                }
                else {
                    ElMessage.warning(res.data.Message)
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const Provinces = ref([{
    "ProvincesName": "",
    "Id": 0,
}])
const ShowProvinces = () => {
    http.get("/api/Account/GetProvinces").then(res => {
        Provinces.value = res.data.Data
    })
}
const City = ref([{
    "CityName": "",
    "ProvincesId": "",
    "Id": "",
    "IsDel": false
}])
const ShowCity = (id: any) => {
    http.get("/api/Account/GetCity", { params: { provincesId: id } }).then(res => {
        City.value = res.data.Data
    })
}
const Xian = ref([{
    "XianName": "",
    "CityId": "",
    "Id": "",
    "IsDel": false
}])
const ShowXian = (id: any) => {
    http.get("/api/Account/GetXian", { params: { CityId: id } }).then(res => {
        Xian.value = res.data.Data
    })
}
//删除
const DelAccount = (id: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http.get("/api/Account/DelAccount", { params: { Id: id } }).then(res => {
            if (res.data.Code == 200) {
                ElMessage.success(res.data.Message)
                ShowAccount()
            }
            else {
                ElMessage.warning(res.data.Message)
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}
</script>
<style>
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
}
</style>